<template>
	<view>

		<st-mc-framework :navTitle="ModuleTitle" @changeLevel="changeLevel" ref="framework"
			@AddModuleData_select='AddModuleData_select' @ResetModuleData_select='ResetModuleData_select'>
			<view class="contentBox">
				<view class="grid-container">
					<view class="grid-item y-f" v-for="item in moduleData_show" :key="item.APPFunID"
						@click="itemClick(item)">
						<uni-icons fontFamily="CustomFontPlatform" :size="24"
							:color="item.AP_Colour">{{ $utils.toUniCode(item.PIC_PH) }}</uni-icons>
						<view style="margin-top: 5px;">
							<text>{{item.APFunName}}</text>
						</view>
					</view>
				</view>

			</view>

		</st-mc-framework>
		<u-toast ref="uToast"></u-toast>

		<u-modal :show="modalshow" :title="modaltitle" width="300" @confirm='modalconfirm'>
			<view class="slot-content">
				{{modalcontent}}
			</view>
		</u-modal>
		<m-loading :text="loadingName" v-model="showMLoading" :showClose="false"
			maskBackgroundColor="rgba(0,0,0,0.3)"></m-loading>
	</view>
</template>
<script>
	import alert from '../../uni_modules/uview-ui/libs/config/props/alert';
	import {
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime,
		formatDateTime,
		navigateMixin,
		baseAddModuleData_select,
		getchangeLevel
	} from '@/st_mes_zs/common/base.js';

	export default {
		mixins: [navigateMixin, baseAddModuleData_select],
		data() {
			return {

				showMLoading: false, //是否加载
				loadingName: '正在加载中……', //加载名称
				modalshow: false,
				modaltitle: '提示',
				modalcontent: '',
				MesBasicInfo: {}, // 控制台基础信息
				MesBasicInfoList: [],
				ModuleTitle: '',
				classShow: false,
				machineShow: false,
				classActions: [{
						name: '白班',
						id: '1'
					},
					{
						name: '夜班',
						id: '2'
					}
				],

				ClockStatus: '',
				ClockStatusName: '上下班打卡',

				moduleData_basic: [],
				moduleData_show: [],
				show: false,
				getEquipmentList: [],

				PIC_PHList: [{
						name: '工作台',
						AP_Colour: "#b7e830",
						PIC_PH: '&#xedcf;',
					}, {
						name: '生产派工',
						PIC_PH: '&#xe679;',
						AP_Colour: "#b7e830",

					},
					{
						name: '生产检验',
						PIC_PH: '&#xe6da;',
						AP_Colour: "#b7e830",

					},
					{
						name: '异常管理',
						PIC_PH: '&#xebcb;',
						AP_Colour: "#b7e830",

					},
					{
						name: '设备管理',
						PIC_PH: '&#xec65;',
						AP_Colour: "#b7e830",

					},
					{
						name: '模具管理',
						PIC_PH: '&#xe69f;',
						AP_Colour: "#b7e830",
					},
					{
						name: '上下班打卡',
						PIC_PH: '&#xe6a7;',
						AP_Colour: "#b7e830",
					},
					{
						name: '生产投料',
						PIC_PH: '&#xe68a;',
						AP_Colour: "#b7e830",
					}
				]
			};
		},

		onLaunch() {
			plus.screen.lockOrientation('landscape-primary');
		},
		onLoad(val) {
			let that = this;
			this.$safeStatus({
				payload: '首页', // 要传递的数据
			});
			uni.$on('refreshList', this.loadData);
			if (val.data) {
				var list = JSON.parse(JSON.stringify(val.data))
				let backData = this.$store.state.GuyueModule.ModuleData_select.filter(item => {
					return item.APPFunID == list
				});
				this.moduleData_show = backData[0]['nood'][0]['pages'];
			} else {
				this.getModuleData();
				let routes = getCurrentPages();
				let currentRoute = routes[routes.length - 1];

				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'mesRouteInfo',
					data: {
						routeIndex: routes.length,
						route: currentRoute.route,
						options: currentRoute.options,
					}
				})
			}

		},
		mounted() {
			let that = this;
			uni.$on('changeLevel', function(data, row) {
				that.changeLevel(data, row)
			})
		},
		onUnload() {
			let routes = getCurrentPages();
			uni.$off('refreshList');
			if (routes.length != this.$store.state.GuyueModule.mesRouteInfo.routeIndex) {} else {
				uni.$off('changeLevel');
			}
		},
		onReady() {
			var that = this
			uni.hideLoading();

			plus.screen.lockOrientation('landscape-primary');
			const {
				GuyueModule,
				UserInfo,
				appConfigInfo
			} = that.$store.state;
			const {
				MesBasicInfo
			} = GuyueModule;
			
			that.ModuleTitle = appConfigInfo.ActiveModule.ModuleName
			that.ModuleID = appConfigInfo.ActiveModule.ModuleID
			that.FWorkshopID = appConfigInfo.ActiveModule.treeTypes[0].pages[0].FWorkshopID
			let MesBasicInfoObj
			if (MesBasicInfo && MesBasicInfo.EmplName) {
				if (appConfigInfo.ActiveModule.ModuleID != MesBasicInfo
					.ModuleID) {
					MesBasicInfoObj = that.addMesBasicInfo()
				} else {
					UserInfo.EmplName = UserInfo.EmplName ? UserInfo.EmplName : UserInfo.UserName
					


					if (UserInfo.EmplName == MesBasicInfo.EmplName) {
						MesBasicInfoObj = MesBasicInfo
					} else {
						MesBasicInfoObj = that.addMesBasicInfo()
						that.$store.commit('GuyueModule/ChangeAndSetStateData', {
							Name1: 'MesBasicInfoList',
							data: []
						})

					}
				}
			} else {
				MesBasicInfoObj = that.addMesBasicInfo()
				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfoList',
					data: []
				})
			}
			that.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'latestMesBasicInfo',
				data: that.addMesBasicInfo()
			})
			that.$store.commit('GuyueModule/ChangeAndSetStateData', {
				Name1: 'MesBasicInfo',
				data: MesBasicInfoObj
			})
			that.MesBasicInfo = MesBasicInfoObj;

		},
		onShow() {
			var that = this
			setTimeout(() => {
				this.AddModuleData_select()

			}, 1000)

			uni.$on('refreshList', () => {
				this.loadData(); // 调用目标方法
			});
		},

		methods: {

			modalconfirm() {
				this.modalshow = false

			},
			loadData() {
				// 你的数据加载逻辑
				
				this.AddModuleData_select()
			},
			getList() {

				this.AddModuleData_select()
			},

			AddModuleData_select(title) {
				var that = this
				
				if (that.$refs.framework && typeof that.$refs.framework.ChangeTabsClick == 'function') {
					that.$refs.framework.ChangeTabsClick()
				}
				
				let newData = JSON.parse(JSON.stringify(that.$store.state.GuyueModule.MesBasicInfo.ModuleData_select));
				const lastItem = newData[newData.length - 1];
				
				if (lastItem && lastItem.nood && lastItem.nood.length > 0) {
					// if (title == 'tab') {
					that.GolastItemUrl(lastItem.url, lastItem.nood[0].pages)
					// }
				} else if (lastItem && lastItem.path) {
					that.GolastItemUrl(lastItem.url)
				} else {
					// that.moduleData_show = that.$store.state.GuyueModule.ModuleData;
					that.getModuleData()
				}
			},
			GolastItemUrl(url, moduleData) {
				var that = this
				
				if (url) {
					uni.showLoading({
						title: '跳转页面中...',
						mask: true
					})
					uni.redirectTo({
						url: url,
						animationType: 'none'
					});

				} else {
					that.moduleData_show = moduleData
				}
			},
			addMesBasicInfo() {
				var that = this
				var appConfigInfo = that.$store.state.appConfigInfo
				var MesBasicInfo = {

					ModuleTitle: appConfigInfo.ActiveModule.ModuleName,
					FWorkshopID: that.FWorkshopID,
					ModuleID: appConfigInfo.ActiveModule.ModuleID,
					EmplName: that.$store.state.UserInfo.EmplName ? that.$store.state.UserInfo.EmplName : that.$store
						.state.UserInfo.UserName,
					openDate: new Date(),
					warehouse: {
						EquipmentID: 0,
						EquipmentName: '',
						EquipmentCode: '全部'
					},
					ShiftObj: {
						ShiftName: '白班',
						ShiftID: 1,
					},
					Status: {
						ClockStatusName: '上班打卡',
						ClockStatus: 0,
						ClockStatusTitle: '首页'
					},
					ModuleData_select: this.$store.state.GuyueModule.ModuleData_select,
					Initialstate: '初次'
				}
				return MesBasicInfo

			},
			getModuleData() { // 获取数据
				let that = this;
				let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.MesBasicInfo.ModuleData_select));
				
				if (newData.length > 1) {
					this.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'ModuleData_select',
						data: newData
					})
					this.moduleData_show = newData[newData.length - 1]['nood'][0]['pages'];

				} else {
					that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
					
					var name = that.MesBasicInfoList.length == 0 ? "未选" : '已选'
					that.ResetModuleData_select(name)
				}

			},
			AssignmentModuleData_select(list) {
				var that = this

				setTimeout(() => {
					const newEquipment = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.MesBasicInfo));
					newEquipment.Initialstate = '多次'

					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'latestMesBasicInfo',
						data: newEquipment
					})
					that.changeMesBasicInfoAll(newEquipment)
				}, 5000)
				const filteredData = list
					// 是否展示工作台
					.filter(category => category.treeTypeName !== "工作台")
					.map(category => ({
						...category,
						pages: category.pages.filter(page => !page.IsHomepage)
					}));

				let backData = this.buildTree(filteredData);
				
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData',
					data: backData
				})
				this.moduleData_basic = JSON.parse(JSON.stringify(backData));
				this.moduleData_show = JSON.parse(JSON.stringify(backData));
			},
			ResetModuleData_select(name) {
				var that = this
				var list = JSON.parse(JSON.stringify(this.$store.state.appConfigInfo.ActiveModule.treeTypes))
				var filteredArray
				if (name == '未选') {
					filteredArray = list.filter(item => ["模具管理", "上下班打卡"].includes(item.treeTypeName));
					that.AssignmentModuleData_select(filteredArray)
				} else {
					that.AssignmentModuleData_select(list)
				}
			},

			buildTree(items) {
				var that = this
				items.forEach(item => {
					if (item.treeTypeName) {
						item.APFunName = item.treeTypeName
						item.APPFunID = item.treeType
						that.PIC_PHList.forEach(a => {
							if (a.name == item.APFunName) {
								item.PIC_PH = a.PIC_PH
								item.AP_Colour = a.AP_Colour
							}
						})
					}
					//工作台展示 ,不展示去掉
					// if (item.treeTypeName == '工作台') {
					// 	item.AP_Link = "/mes_bz/staging/staging"
					// }

				});
				return items
			},
			changeLevel(list, data, row) {
				var that = this;
				if (list.length == 1) { // 顶级
					this.moduleData_show = this.$store.state.GuyueModule.ModuleData;
				} else {
					let backData = list.filter(item => {
						return item.APPFunID == data.APPFunID
					});
					if (backData[0] && backData[0].nood) {
						this.moduleData_show = backData[0]['nood'][0]['pages'];
					}

				}
				let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
				that.changeModuleData_select(newData)

			},
			changeModuleData_select(newData) {
				let that = this;
				const newEquipment = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.MesBasicInfo));
				newEquipment.ModuleData_select = newData
				
				that.changeMesBasicInfoAll(newEquipment)
			},
			changeMesBasicInfoAll(newEquipment) {
				let that = this;
				that.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'MesBasicInfo',
					data: newEquipment
				})
				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
				if (that.MesBasicInfoList.length > 0) {
					var index = that.MesBasicInfoList.findIndex((item) => item.warehouse.EquipmentID ==
						newEquipment.warehouse.EquipmentID)
					that.MesBasicInfoList[index] = newEquipment
					that.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'MesBasicInfoList',
						data: that.MesBasicInfoList
					})

				}

				if (that.$refs.framework && typeof that.$refs.framework.ChangeTabsClick == 'function') {
					that.$refs.framework.ChangeTabsClick()
				}
			},

			itemClick(data) { // 点击模块数据
				var that = this
				console.log(data);
				const newEquipment = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.MesBasicInfo));

				var UrlShow = false
				let routes = getCurrentPages();
				let nood = this.moduleData_show.filter(item => {
					return item.APPFunID == data.APPFunID
				});
				var obj = {
					length: routes.length + 1,
					routes: routes.length,
					Name: data.APFunName,
					APPFunID: data.APPFunID,
					url: data.AP_Link,
					nood: nood
				}
				// 工作台展示 ,不展示去掉  length去掉 +1
				if (!data.pages) { // 判断是否存在子数据
					UrlShow = true
				} else {
					if (data.APFunName == '工作台') {
						UrlShow = true
					} else {
						obj.length = routes.length
					}
				}
				this.moduleData_show = this.$utils.deepClone(data['pages']);
				let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
				newData.push(obj);
				this.$store.commit('GuyueModule/ChangeAndSetStateData', {
					Name1: 'ModuleData_select',
					data: newData
				})
				that.MesBasicInfoList = that.$store.state.GuyueModule.MesBasicInfoList;
				that.changeModuleData_select(newData)
				if (UrlShow = true) {
					if (data.AP_Link) {
						// uni.showLoading({
						// 	title: '跳转页面中...',
						// 	mask: true
						// })
						// that.showMLoading = true
						uni.redirectTo({
							url: data.AP_Link
						});


					}
				}
			}
		},

	}
</script>

<style lang="scss" >
	@import "../css/index.css";

	.contentBox {
		width: 100%;
		overflow: auto;
	}


	/* 如果需要每行恰好三个格子，并且格子大小固定或可预测，可以这样做： */
	.grid-container {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 14px;
	}

	.grid-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 80px;
		background-color: #50cfce;
		color: #fff;
		border-radius: 8px;
		font-size: 18px;
	}
</style>